import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
export default class App extends Component {
  state = {
    list: [
      {
        id: 1,
        todoName: '吃饭',
        isDone: true,
      },
      {
        id: 2,
        todoName: '睡觉',
        isDone: false,
      },
    ],
  }

  //添加任务
  add = (todoName) => {
    const { list } = this.state
    // console.log(todoName)
    // 根据任务名创建新的任务对象

    const obj = {
      // 优化id: 目标就是id为整数,不能和其他数据的id重复.而且要递增
      // 思路: 每一次获取数组中最后一个,拿到最后一个的id.然后根据当前id加1计算新数据的id
      // 如果数组中有数据,则找到最后一个的id+1, 如果没有数据,新数据的id就是1
      id: list.length ? list[list.length - 1].id + 1 : 1,
      todoName,
      isDone: false,
    }
    // 将任务对象添加到数组中
    const newList = [...this.state.list]
    newList.push(obj)
    this.setState({
      list: newList,
    })
  }

  render() {
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          {/* 把app组件中的add函数,传递给Header */}
          <Header add={this.add}></Header>
          <div>
            <List list={this.state.list}></List>
            <Footer></Footer>
          </div>
        </div>
      </div>
    )
  }
}
